<template>
  <div class="login-page flex">
    <div class="box grow scrollable align-vertical side-box box-left">
      <div class="align-vertical-middle wrapper text-center">
        <img class="image-logo" src="@/assets/images/logo.svg" alt="logo-left" />
        <h1 class="h-big">Pragmatic</h1>
        <p class="p-50">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ullamcorper nisl erat, vel convallis elit fermentum pellentesque. Sed
          mollis velit facilisis facilisis viverra.
        </p>
      </div>
    </div>
    <div class="box grow scrollable align-vertical side-box box-right">
      <div class="align-vertical-middle wrapper">
        <form class="form-box" @submit.prevent="login">
          <h2>登录你的账号</h2>
 
    
 
              <float-label class="styled">
                <input type="email" name="username" placeholder="用户名" v-model.trim="email" />
                <span class="error">{{ errors[0] }}</span>
              </float-label>
         
     
              <float-label class="styled">
                <input type="password" name="password" placeholder="密码" v-model.trim="password" />
                <span class="error">{{ errors[0] }}</span>
              </float-label>
         
            <!--<div class="flex">
						<div class="box grow"><el-checkbox>Ricordami </el-checkbox></div>
						<div class="box grow text-right"><router-link to="/dashboard">Password dimenticata?</router-link></div>
            </div>-->

            <div class="flex text-center center pt-30 pb-10">
              <el-button
                plain
                size="small"
                :loading="loading"
                @click="login"
                class="login-btn pulse animated themed"
              >登录</el-button>
            </div>
      
        </form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login2",
  data() {
    return {
      username: "",
      password: "",
      error: null,
      loading: false
    };
  },
  methods: {
   login() {
      this.loading = true;
      this.$validator.validate().then(valid => {
        if (!valid) {
          return;
        } else {
          this.$store
            .dispatch("login", { email: this.email, password: this.password })
            .then(response => {
              this.email = null;
              this.password = null;
              this.loading = false;
              if (this.$route.query.redirect) {
                this.$store.push(this.$route.query.redirect);
              } else {
                this.$router.push("dashboard");
              }
            })
            .catch(error => {
              this.loading = false;
 
            });
        }
      });
    }
  }
};
</script>
 
<style lang="scss" scoped>
@import "../../../assets/scss/_variables";

.login-page {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 !important;

  .side-box {
    .wrapper {
      width: 100%;
      box-sizing: border-box;
      padding: 20px;
    }
  }
  input:-internal-autofill-selected {
    -webkit-text-fill-color: #807c7c !important;

    transition: background-color 5000s ease-out 0.5s !important;
  }
  input {
    font-size: 12px !important;
  }

  .error {
    color: #D7195D;
    font-size: 12px;
    line-height: 1;
    padding-top: 4px;
  }
  .box-left {
    background-image: url("../../../assets/images/login2.jpg");
    background-size: cover;
    background-position: 50% 50%;

    .wrapper {
      .image-logo {
        width: 90%;
        max-width: 100px;
        margin-top: 20px;
      }
    }
  }
  .box-right {
    background: white;
    color: var(--background-color);
  }

  .form-box {
    width: 100%;
    max-width: 340px;
    padding: 30px;
    box-sizing: border-box;
    margin: 20px auto;
    //background: transparent;

    a {
      font-size: 14px;
      color: var(--color-accent);
      text-decoration: none;
      font-weight: 500;
    }

    .image-logo {
      width: 80px;
      margin: 0px auto;
      margin-bottom: 70px;
      display: block;
    }

    .login-btn {
      width: 160px;
      background: rgba($text-color-accent, 0.2);
      color: $text-color;
      border-color: $text-color;
      border-width: 2px;
      font-weight: bold;
      border-radius: 0;

      &:hover {
        background: rgba($text-color-accent, 0.4);
        border-color: $text-color;
        color: $text-color;
      }
    }
  }
}

@media (max-width: 1200px) {
  .login-page {
    .box-left {
      .wrapper {
        .h-big {
          font-size: 50px;
        }
      }
    }
  }
}
@media (max-width: 900px) {
  .login-page {
    .box-left {
      .wrapper {
        .h-big {
          font-size: 30px;
        }
      }
    }
  }
}
@media (max-width: 768px) {
  .login-page {
    display: block;
    overflow: auto;

    .side-box {
      display: block;
    }
  }
}
</style>
